<!DOCTYPE html>
<html lang="<%= I18n.locale %>">
  <head>
    <%= render 'spree/admin/shared/head' %>
    <%= render "spree/admin/shared/custom_head" %>
  </head>

  <body class="admin page-builder"
        id="page-builder"
        data-controller="page-builder tabs dialog"
        data-page-builder-preview-url-value="<%= page_preview_url %>"
  >

    <%= form_for @theme, as: :theme,url: spree.update_with_page_admin_theme_path(@theme), method: :put do |f| %>
      <%= hidden_field_tag :page_id, @page.id %>
      <%= hidden_field_tag :theme_preview_id, @theme_preview.id %>
      <%= hidden_field_tag :page_preview_id, @page_preview.id %>
      <%= render 'spree/admin/page_builder/header' %>
    <% end %>

    <main id="content">
      <%= render 'spree/admin/page_builder/sidebar' %>
      <main id="main-part">
        <div class="desktopLiveView" data-page-builder-target="previewContainer">
          <div class="embed-responsive embed-responsive-4by3">
            <iframe class="embed-responsive-item overflow-y-auto"
                    data-page-builder-target="iframe"
                    data-action="load->page-builder#initializeVisualEditor"
                    id="page-builder-preview"
                    sandbox="allow-same-origin allow-forms allow-popups allow-scripts allow-modals">
            </iframe>
            <button class="editor-add-section btn btn-mint shadow" data-action="click->page-builder#addSection">
              <%= icon("add", height: 22, class: "mr-2") %> Add Section
            </button>
          </div>
        </div>

        <%= turbo_frame_tag :iframe_preview_scripts %>
      </main>
    </main>

    <%= render 'spree/admin/shared/dialog' %>
    <%= render 'spree/admin/shared/modal' %>
    <%= render 'spree/admin/shared/alerts' %>
  </body>
</html>
